<template>
  <div class="set">
    <my-head title="设置"/>
    <mu-container class="sfq">
        <mu-expansion-panel :expand="panel === 'panel1'" @change="toggle('panel1')">
            <div slot="header">司机名称</div>
            {{name}}
        </mu-expansion-panel>
        <mu-expansion-panel :expand="panel === 'panel2'" @change="toggle('panel2')">
            <div slot="header">仓库名称</div>
            <mu-text-field v-model="normal.warehouseId" @focus="openBotttomSheet('open1')" placeholder="请选择仓库" ref="abtypesel" class='input' readonly="readonly"></mu-text-field>
            <mu-bottom-sheet :open.sync="open1">
                <mu-list @item-click="closeBottomSheet">
                    <mu-sub-header>请选择仓库</mu-sub-header>
                    <mu-list-item button v-for="(item,index) in warehouseOptions" :key="index" @click="choiceCQ(item,index)">
                        <mu-list-item-title>{{item}}</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-bottom-sheet>
        </mu-expansion-panel>
        <mu-expansion-panel v-show="isShowTaskCenter" :expand="panel === 'panel3'" @change="toggle('panel3')">
            <div slot="header">任务中心</div>
            <mu-text-field v-model="normal.taskCenterId" @focus="openBotttomSheet('open2')" placeholder="请选择任务" ref="" class='input' readonly="readonly"></mu-text-field>
            <mu-bottom-sheet :open.sync="open2">
                <mu-list @item-click="closeBottomSheet">
                    <mu-sub-header>请选择任务</mu-sub-header>
                    <mu-list-item button @click="choiceRW(item,index)" :key="index" v-for="(item, index) in taskOptions">
                        <mu-list-item-title>{{item}}</mu-list-item-title>
                    </mu-list-item>
                </mu-list>
            </mu-bottom-sheet>
        </mu-expansion-panel>
        <mu-expansion-panel :expand="panel === 'panel4'" @change="toggle('panel4')">
            <div slot="header">工作状态</div>
            {{status}}
        </mu-expansion-panel>
        <mu-expansion-panel :expand="panel === 'panel5'" @change="toggle('panel5')">
            <div slot="header">调度类型</div>
            <mu-checkbox v-model="dispatch" label="交通车任务" @change="dispatchChange"></mu-checkbox>
            <div class="dqcp" v-if="isShowWbusnos">当前选择的车牌：<span class="colored">{{wbusnos}}</span></div>
            <div v-if="isShowWbusnosBtn"><mu-button color="primary" @click="licenseplate = true">重新选择</mu-button></div>
        </mu-expansion-panel>
        <mu-expansion-panel :expand="panel === 'panel6'" @change="toggle('panel6')">
            <div slot="header">修改密码</div>
            <mu-text-field type="password" v-model="oldPD" placeholder="原密码"></mu-text-field><br/>
            <mu-text-field type="password" v-model="newPD1" placeholder="新密码"></mu-text-field><br/>
            <mu-text-field type="password" v-model="newPD2" placeholder="再次确认" @keyup.enter.native="changePasswords"></mu-text-field><br>
            <mu-button color="primary" @click="changePasswords">修改</mu-button>
        </mu-expansion-panel>
        <mu-expansion-panel :expand="panel === 'panel7'" @change="toggle('panel7')">
            <div slot="header">当前版本</div>v{{version}}
        </mu-expansion-panel>
        <mu-expansion-panel :expand="panel === 'panel7'" @change="toggle('panel7')">
            <div slot="header">蓝牙配置</div>
            <h5 class="bluetooth-title">当前配对:{{bluetooth.name}}</h5>
            <h5 class="bluetooth-title">已配对蓝牙设备</h5>
            <ul id="list2" class="printer-list mui-list-unstyled">
                <li v-for="item in paired" @click="SelectBluetooth(item)">{{item.bleName}}</li>
            </ul>
            <mu-button id="bt1" class="bluetooth-btn" color="primary" :disabled="blueValDis" @click="SearchBluetooth">{{blueVal}}</mu-button>
            <h5 class="bluetooth-title">未配对蓝牙设备</h5>
            <ul id="list1" class="printer-list mui-list-unstyled">
                <li v-for="item in unpaired" @click="SelectBluetooth(item)">{{item.bleName}}</li>
            </ul>
            <mu-text-field type="text" v-model="bluetoothId" placeholder="设置蓝牙地址"></mu-text-field><br/>
            <mu-button color="primary" @click="setBluetoothId">设置蓝牙地址</mu-button>
        </mu-expansion-panel>
    </mu-container>
    <!-- <div class="user-info">
        <dl>
            <dt>司机名称：</dt>
            <dd>
                <mu-text-field v-model="name" placeholder="姓名" class='input' readonly="readonly"></mu-text-field>
            </dd>
        </dl>
        <dl>
            <dt>仓库名称：</dt>
            <dd>
                <mu-text-field v-model="normal.warehouseId" @focus="openBotttomSheet('open1')" placeholder="请选择仓库" ref="abtypesel" class='input' readonly="readonly"></mu-text-field>
                <mu-bottom-sheet :open.sync="open1">
                    <mu-list @item-click="closeBottomSheet">
                        <mu-sub-header>请选择仓库</mu-sub-header>
                        <mu-list-item button v-for="(item,index) in warehouseOptions" :key="index" @click="choiceCQ(item,index)">
                            <mu-list-item-title>{{item}}</mu-list-item-title>
                        </mu-list-item>
                    </mu-list>
                </mu-bottom-sheet>
            </dd>
        </dl>
        <dl>
            <dt>任务中心：</dt>
            <dd>
                <mu-text-field v-model="normal.taskCenterId" @focus="openBotttomSheet('open2')" placeholder="请选择任务" ref="" class='input' readonly="readonly"></mu-text-field>
                <mu-bottom-sheet :open.sync="open2">
                    <mu-list @item-click="closeBottomSheet">
                        <mu-sub-header>请选择任务</mu-sub-header>
                        <mu-list-item button @click="choiceRW(item,index)" :key="index" v-for="(item, index) in taskOptions">
                            <mu-list-item-title>{{item}}</mu-list-item-title>
                        </mu-list-item>
                    </mu-list>
                </mu-bottom-sheet>
            </dd>
        </dl>
        <dl>
            <dt>工作状态：</dt>
            <dd>
                <mu-text-field v-model="status" placeholder="工作状态" class='input' readonly="readonly"></mu-text-field>
            </dd>
        </dl>
    </div> -->
    <div class="btns">
        <mu-flex class="select-control-row">
            <mu-switch v-model="workStatus" :label="stext" @change="pauseWork()"></mu-switch>
        </mu-flex>
        <mu-button color="primary" @click="openAlertDialog()">下班</mu-button>
    </div>
    <mu-dialog title="下班会返回主菜单?" width="600" max-width="80%" :esc-press-close="false" :overlay-close="false" :open.sync="openAlert">
        <mu-button slot="actions" flat color="primary" @click="gooffwork()">确定</mu-button>
        <mu-button slot="actions" flat color="primary" @click="closeAlertDialog">取消</mu-button>
    </mu-dialog>
    <!--车牌选择-->
    <mu-drawer :open.sync="licenseplate" right :docked='docked'>
        <mu-list>
            <mu-list-item button v-for="(item, index) in busNos" :key='index' @click="dispatchCreat(item)">
                <mu-list-item-title>{{item.carCode}}</mu-list-item-title>
            </mu-list-item>
            <mu-list-item  @click="licenseplate = false" button>
                <mu-list-item-title>取消操作</mu-list-item-title>
            </mu-list-item>
        </mu-list>
    </mu-drawer>
    <!--库房选择-->
    <mu-drawer :open.sync="storageroom" right :docked='docked'>
        <mu-list>
        <mu-list-item button v-for="(item, index) in storageroomZones" :key='index' @click="selectStorehouse(item)">
            <mu-list-item-title>{{item.name}}</mu-list-item-title>
        </mu-list-item>
        <mu-list-item  @click="storageroom = false, licenseplate = false" button>
            <mu-list-item-title>取消操作</mu-list-item-title>
        </mu-list-item>
        </mu-list>
    </mu-drawer>
  </div>
</template>

<script>
import myHead from '@/components/header'
import api from "@/common/api"
export default {
  name: 'pickcar',
  components: {
    myHead
  },
  data () {
    return {
        version: 1.1,
        oldPD: '',
        newPD1: '',
        newPD2: '',
        name: '',
        open1: false,
        open2: false,
        status: '',
        taskOptions: [],
        warehouseOptions: [],
        normal: {
            taskCenterId: '',
            warehouseId: ''
        },
        warehouses: null,
        workStatus: false,
        stext: "是否接单",
        openAlert: false,
        panel: '',
        dispatch: false,
        dispatchlocked: false,
        licenseplate: false,
        storageroom: false,
        storageroomZones: null,
        docked: false,
        busNos: null,
        wbusnos: '',
        isShowWbusnos: false,
        isShowWbusnosBtn: false,
        isShowTaskCenter: true,
        carCode: null,
        requestOnce: true,
        blueValDis: false,
        blueVal: "搜索蓝牙设备",
        printTestDis: false,
        bluetoothId: "",
        bluetooth: {
            name: "",
            id: ""
        },
        paired: [],
        unpaired: []
    }
  },
  methods: {
    changePasswords () {
        if(this.oldPD == ""){
            this.Toast({
                duration: 1500,
                mask: true,
                message: '请输入原密码'
            });
            return;
        }
        if(this.newPD1 == '' && this.newPD2 == ''){
            this.Toast({
                duration: 1500,
                mask: true,
                message: '请输入新密码'
            });
            return;
        }
        if(this.newPD1 !== this.newPD2){
            this.Toast({
                mask: true,
                message: '两次输入的密码不一样'
            });
            return;
        }else{
            let data = Object.assign({},this.$store.state.user, {
                content: {
                    oldPD: this.common.getPasswords(this.oldPD), // 原始密码
                    newPD: this.common.getPasswords(this.newPD1), // 新密码
                    oldPDM: this.oldPD, // 原始密码
                    newPDM: this.newPD1 // 新密码
                }
            });
            this.common.reqData(api.app('changePasswords'), data, res=>{
                console.log("修改密码",res.data)
                if(res.data.status == 100){
                    this.Toast.success({
                        duration: 2000,
                        mask: true,
                        message: '密码修改成功'
                    });
                    this.oldPD = this.newPD1 = this.newPD2 = '';
                }else{
                    this.Toast({
                        mask: true,
                        message: res.data.msg
                    });
                }
            },err =>{
                console.log(err)
                this.Toast.clear();
            });  
        }
    },
    dispatchChange () {
        this.dispatch ? this.licenseplate = true : this.isShowWbusnosBtn = this.isShowWbusnos = this.licenseplate = this.dispatchlocked = false;
        if(!this.dispatch){
            this.common.reqData(api.app('busNosNoCreat'), this.$store.state.user, res=>{
                console.log("交通车反选",res.data)
                if(res.data.status == 100){
                    this.Toast.success({
                        duration: 1000,
                        mask: true,
                        message: '操作成功'
                    });
                    this.isShowTaskCenter = true;
                }
            },err =>{
                console.log(err)
                this.Toast.clear();
            });            
        }
    },
    SelectBluetooth(item){
        console.log('选择配对设备');
        localStorage.setItem('bleId', item.bleId);
        localStorage.setItem('bleName', item.bleName);
        this.bluetooth.name = item.bleName;
        this.bluetooth.id = item.bleId;
        
        this.common.printVal({},()=>{});
    },
    SearchBluetooth(){
        /*plus变量定义*/
        var main, BluetoothAdapter, BAdapter, IntentFilter, BluetoothDevice, receiver; //有些我也不知道是啥意思-_-!;
        var _this = this;
        /*其他定义*/
        var isSearchDevices = false, //是否处于搜索状态
            savedBleId = localStorage.getItem("bleId"), //缓存的设备ID
            BleDeviceObjAry = [], //BleDevice对象数组 
            debug = true; //调试模式
            main = plus.android.runtimeMainActivity(),
            BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter"),
            IntentFilter = plus.android.importClass('android.content.IntentFilter'),
            BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice"),
            BAdapter = new BluetoothAdapter.getDefaultAdapter();
		//搜索设备
		var SearchDevices = ()=> {
			var self = this;
			isSearchDevices = true;
            this.blueValDis = true;
			BleDeviceObjAry = []; //清空BleDeviceObjAry
            this.unpaired = [];
            this.paired = [];
            this.blueVal = "...搜索蓝牙设备中...";
			debug && console.log("开始搜索蓝牙设备...");
            
			var filter = new IntentFilter(),
				bdevice = new BluetoothDevice();

			BAdapter.startDiscovery(); //开启搜索
			receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
				onReceive: onReceiveFn
			});
			filter.addAction(bdevice.ACTION_FOUND);
			filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);
			filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);
			filter.addAction(BAdapter.ACTION_STATE_CHANGED);
			main.registerReceiver(receiver, filter); //注册监听事件

			//监听回调函数
			function onReceiveFn(context, intent) {
				plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
                console.log("监听回调函数:"+intent.getAction());
				//开始搜索改变状态
				intent.getAction() == "android.bluetooth.device.action.FOUND" && (isSearchDevices = true);

				//判断是否搜索结束
				if(intent.getAction() == 'android.bluetooth.adapter.action.DISCOVERY_FINISHED') {
					main.unregisterReceiver(receiver); //取消监听
					isSearchDevices = false;
					BleDeviceObjAry = [];
                    _this.blueValDis = false;
                    _this.blueVal = "搜索蓝牙设备";
					// self.SetButtonStatus("重新搜索设备", false);
					return false;
				}

				var BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE),
					bleName = BleDevice && BleDevice.getName(), //设备名称
					bleId = BleDevice && BleDevice.getAddress(); //设备mac地址

				if(!bleName || !bleId) {
					return false;
				}
				console.log("BleDevice.getBondState():"+BleDevice.getBondState()+',xhero:'+bdevice.BOND_BONDED);
				//判断是否配对
				if(BleDevice.getBondState() == bdevice.BOND_BONDED) {
					debug && console.log("已配对蓝牙设备：" + bleName + '    ' + bleId);
					// self.SetpairedListHtml(pairedList, bleName, bleId);
					//如果缓存保存的设备ID和该ID一致则配对
					_this.paired.push({
                        bleName: bleName,
                        bleId: bleId
                    });
					// if(savedBleId == bleId) {
					// 	BleDevice.createBond();
					// }
				} else {
					debug && console.log("未配对蓝牙设备：" + bleName + '    ' + bleId);
					BleDeviceObjAry.push(BleDevice);
					_this.unpaired.push({
                        bleName: bleName,
                        bleId: bleId
                    });
					// self.SetpairedListHtml(unpairedList, bleName, bleId);
				}

			}

		}
        if(!BAdapter.isEnabled()) {
            plus.nativeUI.confirm("蓝牙处于关闭状态，是否打开？", function(e) {
                if(e.index == 0) {
                    BAdapter.enable();
                }
            });
            debug && console.log("蓝牙处于关闭状态，正在打开...");
        } else {
            debug && console.log("蓝牙处于开启状态，准备搜索蓝牙设备...");
            SearchDevices();
        }

        // this.EventInit();
        if(!isSearchDevices) {
            SearchDevices();
        }
            
    },
    setBluetoothId(){
        console.log('选择配对设备');
        localStorage.setItem('bleId', this.bluetoothId);
        localStorage.setItem('bleName', this.bluetoothId);
        this.bluetooth.name = this.bluetoothId;
        this.bluetooth.id = this.bluetoothId;
    },
    selectStorehouse (item) {
        this.common.reqData(api.app('busNosCreat'), Object.assign({},this.$store.state.user,{
            content: {
                busNo: this.carCode,
                code: item.code,
                name: item.name,
                id: item.id
            }
        }), res=>{
            console.log("库房选择返回数据：",res.data)
            if(res.data.status == 100){
                this.licenseplate = false;
                this.dispatchlocked = true;
                this.isShowWbusnos = true;
                this.isShowWbusnosBtn = true;
                this.storageroom = false; // 关闭库房选择
                this.wbusnos = this.carCode;
                this.isShowTaskCenter = false;
                this.Toast.success({
                    duration: 1000,
                    mask: true,
                    message: '选择成功'
                });
            }else{
                // 提示
                this.Toast({
                    mask: true,
                    message: res.data.msg
                });
                this.storageroom = false; // 关闭库房选择
                this.licenseplate = false;
            }
        },err =>{
            console.log(err)
            this.Toast.clear();
        });
    },
    dispatchCreat (item) {
        console.log(item.carCode);
        this.carCode = item.carCode;
        this.storageroom = true; // 打开库房选择
    },
    toggle (panel) {
        this.panel = panel === this.panel ? '' : panel;
    },
    choiceCQ(item, index) {
        let beforeName = this.normal.warehouseId;
        this.normal.warehouseId = item;
        this.normal.taskCenterId = "";
        this.open1 = false;
        this.change(true);
        this.updata('CQ', beforeName);
        this.panel = 'panel3';
    },
    choiceRW (item, index) {
        let beforeName = this.normal.taskCenterId;
        this.normal.taskCenterId = item;
        this.open2 = false;
        this.updata('RW', beforeName);
    },
    closeBottomSheet () {
        this.open = false;
    },
    openBotttomSheet (who) {
        who == 'open1' ? this.open1 = true : this.open2 = true;
    },
    openAlertDialog () {
        this.openAlert = true;
    },
    closeAlertDialog () {
        this.openAlert = false;
        // if(Math.floor(Math.random()*3) == 0){
        //     this.$store.commit('setStatus', "WORKING");
        // }else if(Math.floor(Math.random()*3) == 1){
        //     this.$store.commit('setStatus', "SUSPEND");
        // }else{
        //     this.$store.commit('setStatus', "IDLE");
        // }
    },
    gooffwork () {
        this.openAlert = false;
        // 更新数据
        let data = Object.assign({},this.$store.state.user,{
            "content": {
                "suspendFlag": !this.workStatus,
                "stopWork": true
            }
        });
        console.log('接单状态',this.workStatus)
        this.common.reqData(api.app('setStatusChange'), data, res=>{
            if(res.data.status == 100){
                // 提示
                this.Toast.success({
                    duration: 1000,
                    mask: true,
                    message: '已下班'
                });
                setTimeout(() => {
                    this.$router.push({ path: "/" })
                }, 1000);
            }else{
                // 提示
                this.Toast({
                    duration: 0,
                    mask: true,
                    message: res.data.msg
                });
            }
        },err =>{
            console.log(err)
            this.Toast.clear();
        });
    },
    pauseWork () {
        this.workStatus = !this.workStatus;
        // 更新数据
        let data = Object.assign({},this.$store.state.user,{
            "content": {
                "suspendFlag": !this.workStatus
            }
        });
        if(this.requestOnce){
            this.requestOnce = false;
            // 司机信息查询
            this.common.reqData(api.app('setStatusChange'), data, res=>{
                console.log("暂停接单",res)
                this.requestOnce = true;
                if(res.data.status == 100){
                    if(this.workStatus){
                        this.workStatus = false;
                        //this.stext = "继续接单";
                        // 提示
                        this.Toast.success({
                            duration: 1500,
                            mask: true,
                            message: '暂停接单成功'
                        });
                    }else{
                        this.workStatus = true;
                        //this.stext = "暂停接单";
                        // 提示
                        this.Toast.success({
                            duration: 1500,
                            mask: true,
                            message: '继续接单成功'
                        });
                    }
                }
            },err =>{
                this.requestOnce = true;
                console.log(err)
                this.Toast.clear();
            });
        }
    },
    updata (flag, item) {
        let postWarehouseId = null, postTaskId = null;
        for(let i=0;i<this.warehouses.length;i++){
            if(this.warehouses[i].name == this.normal.warehouseId){
                postWarehouseId = this.warehouses[i].id;
                let task = this.warehouses[i].taskCenters;
                if(task.length !== 0){
                    for(let j=0;j<task.length;j++){
                        if(task[j].name == this.normal.taskCenterId){
                            postTaskId = task[j].id;
                        }
                    }
                }
            }
        }
        // 更新数据
        let data = Object.assign({},this.$store.state.user,{
            "content": {
                "warehouseId": postWarehouseId, // 仓库ID
                "id": postTaskId ? postTaskId : "" // 任务中心ID
            }
        });
        // 司机信息查询
        this.common.reqData(api.app('setWarehouseChange'), data, res=>{
            console.log("更新信息", res)
            if(res.data.status == 100){
                // 提示
                this.Toast.success({
                    duration: 1500,
                    mask: true,
                    message: '信息更新成功'
                });
                
                this.$store.commit('warehouse', {
                    warehouse: this.normal.warehouseId
                })

                // this.storageroomZones
                this.busNos = res.data.content.busNos;
                this.storageroomZones = res.data.content.zones;
            }else{
                // 提示
                this.Toast({
                    duration: 2500,
                    mask: true,
                    message: res.data.msg
                });
                flag === 'RW' ? this.normal.taskCenterId = item : 0;
            }
        },err =>{
            console.log(err)
            this.Toast.clear();
        });
    },
    change (flag) {
        this.taskOptions = [];
        flag ? this.normal.taskCenterId = "" : console.log();
        for(let i=0;i<this.warehouses.length;i++){
            if(this.warehouses[i].name == this.normal.warehouseId){
                let task = this.warehouses[i].taskCenters;
                if(task.length == 0){
                    this.taskOptions = [];
                }else{
                    this.taskOptions = [];
                    for(let j=0;j<task.length;j++){
                        this.taskOptions.push(task[j].name);
                    }
                }
            }
        }
    },
    // 获取司机信息
    getDriverInfo () {
        // 司机信息查询
        this.common.reqData(api.app('setDriverInfo'), this.$store.state.user, res=>{
            console.log("司机信息查询",res.data)
            if(res.data.status == 100){
                this.workStatus = !res.data.content.suspendFlag;
                this.name = res.data.content.name;
                this.status = res.data.content.status;
                for(let i=0;i<this.warehouses.length;i++){
                    if(this.warehouses[i].id == res.data.content.warehouseId){
                        this.normal.warehouseId = this.warehouses[i].name;
                        let task = this.warehouses[i].taskCenters;
                        for(let j=0;j<task.length;j++){
                            if(task[j].id == res.data.content.taskCenterId){
                                this.normal.taskCenterId = task[j].name;
                            }
                        }
                    }
                }
                this.change(false);
                // 是否交通车驾驶员
                if(res.data.content.dispatch){
                    this.isShowWbusnosBtn = this.isShowWbusnos = this.dispatchlocked = this.dispatch = true;
                    this.isShowTaskCenter = false;
                    this.wbusnos = res.data.content.carCode;
                }else{
                    this.isShowTaskCenter = true;
                }
                // 获取库房
                // this.storageroomZones
                this.storageroomZones = res.data.content.zones;
                console.log(this.storageroomZones);
            }else{
            }
        },err =>{
            console.log(err)
            this.Toast.clear();
        });
    },
    // 仓库选项
    getWarehouses () {
        this.warehouses = this.$store.state.warehouses;
        for(let i=0;i<this.warehouses.length;i++){
            this.warehouseOptions.unshift(this.warehouses[i].name);
        }
    },
    // 交通车车牌号
    getBusNos () {
        // 司机信息查询
        this.common.reqData(api.app('busNos'), this.$store.state.user, res=>{
            console.log("交通车车牌",res.data)
            if(res.data.status == 100){
                this.busNos = res.data.content.busNos;
            }
        },err =>{
            console.log(err)
            this.Toast.clear();
        });
    }
  },
  mounted () {
    // 获取仓库信息
    this.getWarehouses();
    // 获取司机信息
    this.getDriverInfo();
    // 交通车车牌号
    this.getBusNos();
    // 获取版本号
    let _this = this;
    window.plus ? plus.runtime.getProperty(plus.runtime.appid, function(infos){
        // alert("infos:" + JSON.stringify(infos));
        console.log("infos:" + JSON.stringify(infos));
        _this.version = infos.version;
    }):0;
  },
  watch: {
    licenseplate () {
        if(!this.licenseplate && this.dispatchlocked){
            this.dispatch = true;
        }
        if(!this.licenseplate && !this.dispatchlocked){
            this.dispatch = false;
        }
        //this.licenseplate ? this.dispatch = true : this.dispatch = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.set{
    padding: 0 0 2em;
}
.mu-drawer{
    width: 200px;
}
.mu-drawer li {
    border-bottom: 1px dashed #0d47a1;
    border-top: 1px dashed #0d47a1;
    margin: 0 10px 10px;
}
.dqcp{
    margin: 15px 0;
}
.user-info, .sfq{
    margin: 10px auto 0;
    width: 95%;
    font-size: 1.25em;
}
.user-info dl{
    margin: 5px 0;
    line-height: 2;
}
.user-info dt{
}
.mu-input{
    margin: 0;
}
.user-info dd .mu-input{
    width: 100%;
}
.btns{
    width: 95%;
    margin: 2em auto 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.colored{
    color: red;
    font-size: 1.25em;
}
.printer-list{
    height: 5rem;
    border: 1px solid #ccc;
    overflow-x: hidden;
    overflow-y: auto;
}
#list1.printer-list{
    height: auto;
    min-height: 5rem;
}
.printer-list li{
    font-size: 1rem;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 10px;
    border-bottom: 1px dashed #ddd;
}
.bluetooth-btn{
    margin-top: 10px;
}
.bluetooth-title{
    margin: 10px 0;
}
</style>
